<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import { getBuy, deleteBuy, istoken } from "../../../api/api";
import upData from "./upData/addData.vue";
const data = ref([])
const integral = ref()
const money = ref()
const centerDialogVisible = ref(false)
onMounted(() => {
    getData()
    is()
})
//判断登录
const is = async () => {
    const res = await istoken()
    if (res.data.code !== '200') {
        // 从localStorage中删除名为'token'的项
        localStorage.removeItem('token');
        localStorage.removeItem('mail');
    }
}
//删除数据
const handleDelete = async (row: string) => {
    const res = await deleteBuy({ id: row })
    data.value = res.data.data
}
const inFO = (e: boolean) => {
    centerDialogVisible.value = e;
}
//获取数据
const getData = async () => {
    const res = await getBuy()
    data.value = res.data.data
}
//添加数据
const getNewData = (value: any) => {
    data.value = value
}
</script>

<template>
    <upData title="添加数据" :money :integral :centerDialogVisible @update:centerDialogVisible="inFO"
        @update:newData="getNewData">
        <el-form label-width="auto">
            <el-form-item label="金额：">
                <el-input v-model="money" placeholder="请输入金额" />
            </el-form-item>
            <el-form-item label="积分：">
                <el-input v-model="integral" placeholder="请输入积分" />
            </el-form-item>
        </el-form>
    </upData>
    <!--  -->
    <div class="data">
        <div class="input">
            <el-button type="primary" :icon="Upload"
                @click="centerDialogVisible = !centerDialogVisible">添加数据</el-button>
        </div>
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id" />
            <el-table-column label="钱" prop="money" width="200px" />
            <el-table-column label="积分" prop="integral" width="200px" />
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.row._id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>